<template>
	<su-popup :show="visible" type="bottom" @close="onCancel">
		<view class="picker-header">
			<text class="cancel" @tap="onCancel">取消</text>
			<text class="confirm" @tap="onConfirm">确定</text>
		</view>
		<picker-view indicator-style="height: 40px;" :value="currentIndex" @change="bindChange" class="picker-view">
			<picker-view-column v-for="(item, index1) in columnData" :key="index1">
				<view class="item" v-for="(son, index2) in item" :key="index2">{{ son }}</view>
			</picker-view-column>
		</picker-view>
	</su-popup>
</template>

<script setup>
	import { ref, watch, nextTick, getCurrentInstance } from 'vue'
	const props = defineProps({
		visible: {
			type: Boolean,
			default: () => false
		},
		columnData: {
			type: Array,
			default: () => [[]]
		},
	})
	const { proxy } = getCurrentInstance()
	const emits = defineEmits(['update:visible', 'confirm', 'change'])
	const currentIndex = ref(Array.from({length: props.columnData.length}, () => 0))

	const bindChange = (e) => {
		const val = e.detail.value
		currentIndex.value = val
		emits('change', val)
	}
	const onCancel = () => {
		emits('update:visible', false)
	}
	const onConfirm = () => {
		let index = currentIndex.value;
		let result = []
		props.columnData.forEach((item, i) => {
			result.push(item[index[i]])
		})
		emits('confirm', result)
	}
</script>

<style lang="scss" scoped>
	.picker-view {
		width: 750rpx;
		height: 500rpx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 80rpx;
		text-align: center;
	}
	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		padding-right: 30rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #eee;
		.cancel {
			color: #7f7f7f;
		}
		.confirm {
			color: #07c160;
		}
	}
</style>
